<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css" media="all">
</head>

<body class="vsc-initialized">
<div class="layui-layout layui-layout-admin">
    <!-- 左侧导航 -->
    <div class="layui-side layui-bg-black">
        <ul class="layui-nav layui-nav-tree layui-nav-side" lay-shrink="all">
            <li class="nav-header" style="background-color: #2E2D3C">
                <div>
                    <h3 style="color: #ffffff; padding: 50px 20px">
                        <strong style="font-size: 18px">人脸识别管理</strong><br/>
                    </h3>
                </div>
            </li>
            <li class="layui-nav-item layui-nav-itemed">
                <a href="javascript:;">训练管理</a>
                <dl class="layui-nav-child">
                    <dd class="main_left"><a data-src="/admin/learn" target="_top">机器训练</a></dd>
                    <dd class="main_left"><a data-src="/admin/upload" target="_top">上传数据</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;">数据列表</a>
                <dl class="layui-nav-child">
                    <dd class="main_left"><a data-src="/admin/login" target="_top">上传数据</a></dd>
                    <dd><a href="">后台模版</a></dd>
                    <dd><a href="">电商平台</a></dd>
                </dl>
            </li>
        </ul>
    </div>

    <div class="layui-body layui-tab-content site-demo site-demo-body">
        <iframe frameborder="no" scrolling="yes" style="width: 100%; overflow: visible;" src="" id="frame"></iframe>
    </div>
</div>
<script src="/static/layui/layui.js"></script>
<script src="/static/assets/js/jquery.min.js"></script>
<script>
    $(function () {
        //获取src值
        $(".main_left a").on("click", function () {
            var address = $(this).attr("data-src");
            $("iframe").attr("src", address);
        });
        //一下代码是根据窗口高度在设置iframe的高度
        var frame = $("#frame");

        var height = $(window).height();
        frame.css("height", height);
    });

    layui.use('element', function () {
        var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块

        //监听导航点击
        element.on('nav(demo)', function (elem) {
            //console.log(elem)
            layer.msg(elem.text());
        });
    });
</script>
</body>

</html>